<!--
  文件描述：
  创建时间：2022/3/23 9:53
  创建人：Admin
-->
<template>
<page-view class="flex-column">
  <title-bar :show-back="true" @back="$router.back()">收货地址</title-bar>
  <div class="content-box flex-1">
    <div class="address-item flex-row" v-for="(item) in addressInfoList" :key="item.id">
      <div class="left flex-1">
        <div class="flex-row a-c">
          <div class="person-name">{{item.person_name}}</div>
          <div class="person-phone">{{item.phone}}</div>
        </div>
        <div class="flex-row a-c">
          <div class="tag flex-row a-c j-c bg-second">{{item.tag}}</div>
          <div class="address-text">{{item.address}}</div>
        </div>
      </div>
      <div class="right flex-row a-c j-c">
        <span class="iconfont icontag-fill"></span>
      </div>
    </div>
    <button class="addAddress btn bg-primary" @click="$router.push({name:'addAddress'})">添加收货地址</button>
  </div>
</page-view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  name: "receiveAddress",
  data(){
    return {
      addressInfoList:[]
    }
  },
  methods:{
    async getMyAddressInfoList(){
      let results = await Api.addressInfo.getMyAddressInfoList();
      this.addressInfoList = results;
    }
  },
  created() {
    this.getMyAddressInfoList();
  }
}
</script>

<style scoped lang="scss">
.address-item{
  padding: 0.01rem;
  margin-top: 0.03rem;
  box-shadow: 0 0.01rem 0.03rem 0.01rem #dddddd;
  .left{
    padding: 0.03rem;
    .person-name{
      min-width: 0.6rem;
      height: 0.3rem;
      line-height: 0.3rem;
      font-weight: bold;
      font-size: 0.18rem;
    }
    .person-phone{
      margin-left: 0.05rem;
      font-size: 0.14rem;
    }
    .tag{
      min-width: 0.6rem;
      height: 0.25rem;
      border-radius: 0.03rem;
      //margin-left: 0.1rem;
      color: white;
    }
    .address-text{
      margin-left: 0.1rem;
    }
    //border: 1px solid black;
  }
  .right{
    width: 0.6rem;
    //border: 1px solid red;
    .iconfont{
      font-size: 0.2rem;
      color: gray;
    }
  }
}
.btn{
  width: 100%;
  height: 0.4rem;
  margin-top: 0.15rem;
  color: white;
  font-size: 0.18rem;
  border: none;
  outline: none;
  border-radius: 0.05rem;
}
</style>